<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import {
    queryTotalArchiveInfo,
    deleteTotalArchive,
  } from '@/api/reemployment-management/document';

  const loading = ref(false);
  const emits = defineEmits(['edit', 'update']);
  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
  });

  const baseNameMap = {
    itemTitle: { key: 'title' },
    itemDate: { key: 'trainDate', label: '培训时间' },
    itemStartDate: { key: 'startDate' },
    itemEndDate: { key: 'endDate' },
    itemAddress: { key: 'address', label: '培训地点' },
    itemCount: { key: 'studentCount', label: '参培人数' },
    itemTeachers: { key: 'teachers', label: '培训教师' },
    itemProject: { key: 'project', label: '培训项目' },
    //
    teacherQualificationPhotoResIds: {
      key: 'teacherQualificationPhotoResIds',
      label: '培训教师资质照片',
    },
    courseTableResIds: { key: 'courseTableResIds', label: '培训课程表' },
    studentRosterResIds: {
      key: 'studentRosterResIds',
      label: '培训学员花名册',
    },
    signInTableResIds: { key: 'signInTableResIds', label: '培训签到表' },
    assessmentTableResIds: {
      key: 'assessmentTableResIds',
      label: '培训考核表',
    },
    trainFolioResIds: { key: 'trainFolioResIds', label: '培训风采' },
  };
  const currentItem = ref<any>({});

  const handleDelete = () => {
    // 删除
    console.log('delete');
    loading.value = true;
    deleteTotalArchive(props.id)
      .then((res) => {
        Message.success(res);
        emits('update');
      })
      .catch((err) => {})
      .finally(() => {
        loading.value = false;
      });
  };

  watch(
    () => props.id,
    (newVal) => {
      if (newVal) {
        loading.value = true;
        queryTotalArchiveInfo(newVal)
          .then((res) => {
            currentItem.value = res;
            console.log(currentItem.value)
          })
          .catch((err) => {})
          .finally(() => {
            loading.value = false;
          });
      }
    },
    { immediate: true }
  );
</script>

<template>
  <div class="md-total-info">
    <table v-if="currentItem">
      <thead>
        <tr>
          <th colspan="12">{{ currentItem[baseNameMap.itemTitle.key] }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="label" colspan="1">{{ baseNameMap.itemDate.label }}</td>
          <td colspan="3"
            >{{ currentItem[baseNameMap.itemStartDate.key] }}至{{
              currentItem[baseNameMap.itemEndDate.key]
            }}</td
          >
          <td class="label" colspan="1">{{ baseNameMap.itemAddress.label }}</td>
          <td colspan="3">{{ currentItem[baseNameMap.itemAddress.key] }}</td>
          <td class="label" colspan="1">{{ baseNameMap.itemCount.label }}</td>
          <td colspan="3">{{ currentItem[baseNameMap.itemCount.key] }}</td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.itemTeachers.label
          }}</td>
          <td colspan="3">{{ currentItem[baseNameMap.itemTeachers.key] }}</td>
          <td class="label" colspan="1">{{ baseNameMap.itemProject.label }}</td>
          <td colspan="7">{{ currentItem[baseNameMap.itemProject.key] }}</td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.teacherQualificationPhotoResIds.label
          }}</td>
          <td colspan="11" class="value-imgs">
            <a-space fill>
              <a-image width="200" height="100" :src="item.resourceUrl" v-for="(item, index) of currentItem[baseNameMap.teacherQualificationPhotoResIds.key]" :key="'ti-'+item.id+index"/>
            </a-space>
          </td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.courseTableResIds.label
          }}</td>
          <td colspan="11" class="value-imgs">
            <a-space fill>
              <a-image width="200" height="100" :src="item.resourceUrl" v-for="(item, index) of currentItem[baseNameMap.courseTableResIds.key]" :key="'ti-'+item.id+index"/>
            </a-space>
          </td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.studentRosterResIds.label
          }}</td>
          <td colspan="11" class="value-imgs">
            <a-space fill>
              <a-image width="200" height="100" :src="item.resourceUrl" v-for="(item, index) of currentItem[baseNameMap.studentRosterResIds.key]" :key="'ti-'+item.id+index"/>
            </a-space>
          </td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.signInTableResIds.label
          }}</td>
          <td colspan="11" class="value-imgs">
            <a-space fill>
              <a-image width="200" height="100" :src="item.resourceUrl" v-for="(item, index) of currentItem[baseNameMap.signInTableResIds.key]" :key="'ti-'+item.id+index"/>
            </a-space>
          </td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.assessmentTableResIds.label
          }}</td>
          <td colspan="11" class="value-imgs">
            <a-space fill>
              <a-image width="200" height="100" :src="item.resourceUrl" v-for="(item, index) of currentItem[baseNameMap.assessmentTableResIds.key]" :key="'ti-'+item.id+index"/>
            </a-space>
          </td>
        </tr>
        <tr>
          <td class="label" colspan="1">{{
            baseNameMap.trainFolioResIds.label
          }}</td>
          <td colspan="11" class="value-imgs">
            <a-space fill>
              <a-image width="200" height="100" :src="item.resourceUrl" v-for="(item, index) of currentItem[baseNameMap.trainFolioResIds.key]" :key="'ti-'+item.id+index"/>
            </a-space>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="md-total-btns m-bottom-btns">
      <a-space>
        <a-popconfirm type="warning" style="width: 240px" @ok="handleDelete">
          <template #icon><span></span></template>
          <template #content>
            <div>
              <div
                style="font-weight: 600; text-align: center"
                class="flex-center"
              >
                <icon-info-circle
                  size="20"
                  style="color: rgb(var(--warning-6)); margin-right: 4px"
                />
                <span>确定删除该档案吗？</span>
              </div>
              <div style="margin-top: 4px; font-size: 12px; color: #86909c"
                >提示：此操作不可逆，参加此次培训学员的个人档案将一并删除。</div
              >
            </div>
          </template>
          <ae-button purpose="delete">删除</ae-button>
        </a-popconfirm>

        <ae-button purpose="edit" @click="emits('edit', props.id)"
          >编辑</ae-button
        >
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .md-total-info {
    padding: 10px 0;
    color: var(--color-text-1);

    padding-bottom: 40px;
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .md-total-info {
    table {
      width: 100%;
      table-layout: fixed;
      // font-weight: 600;

      th,
      td {
        border: 1px solid var(--color-neutral-4);
        padding: 12px 0px;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      th {
        padding: 8px 0;
        font-size: 16px;
      }

      .label {
        background-color: var(--color-neutral-3);
        user-select: none;
      }

      td.value-imgs {
        // padding: 0 4px;
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: hidden;
        overflow-x: scroll;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      td > input {
        outline: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        padding: 5px;
        text-align: center;
        pointer-events: auto;

        &:focus {
          background-color: rgb(var(--arcoblue-1));
        }
      }
    }
  }
</style>
